<template>
    <p class="wait">
        <span class="point">....</span>
    </p>
</template>
<script>
    export default {
        setup(){

        }
    }
</script>

<style>
.wait {
    width: 28px;
    display: inline-block;
    text-align: left;
    margin: 0 4px;
}
.point{
    display: inline-block;
    overflow: hidden;
    animation-name: wait;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@keyframes wait {
    0% {
        width:0;
    }
    25% {
        width:7px;
    }
    50% {
        width:14px;
    }
    75% {
        width:21px;
    }
    100% {
        width:28px;
    }
}
</style>